// pages/visitors/tools/posterCard/com/poster2/poster2.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    posterData: {
      type: Object,
      value: {}
    }
  },

  /**
   * 组件的配置
   */
  options: {
    styleIsolation: 'isolated',
    pureDataPattern: /^_/
  },

  /**
   * 组件的初始数据
   */
  data: {
    qrCode: '',
    bgImg: '',
    userAddress: '',
    userAvatar: '',
    userName: '',
    userBrand: '',
    userMobile: ''
  },

  /**
   * 组件的监听器
   */
  observers: {
    'posterData': function () {
      let t = this
      let {
        qrCode,
        bgImg,
        userAddress,
        userAvatar,
        userName,
        userBrand,
        userMobile
      } = t.data.posterData
      t.setData({
        qrCode: qrCode || '',
        bgImg: bgImg || '',
        userAddress: userAddress || '',
        userAvatar: userAvatar || '',
        userName: userName || '',
        userBrand: userBrand || '',
        userMobile: userMobile || ''
      })
    },
  },

  /**
   * 组件的生命周期
   */
  lifetimes: {
    attached: function () {

    },
    detached: function () {

    },
  },

  /**
   * 组件的方法列表
   */
  methods: {

    transmitPosterConfig() {
      let t = this;
      let {
        qrCode,
        bgImg,
        userAddress,
        userAvatar,
        userName,
        userBrand,
        userMobile
      } = t.data
      let posterConfig = t.createPosterConfig({
        qrCode,
        bgImg,
        userAddress,
        userAvatar,
        userName,
        userBrand,
        userMobile
      })
      t.triggerEvent('transmit', posterConfig)
    },

    createPosterConfig({
      qrCode,
      bgImg,
      userAddress,
      userAvatar,
      userName,
      userBrand,
      userMobile
    }) {
      return {
        width: '750rpx',
        height: '1354rpx',
        background: `${bgImg}`,
        views: [{
            type: 'rect',
            css: {
              top: '1104rpx',
              left: '30rpx',
              width: '690rpx',
              height: '200rpx',
              color: '#fff',
              borderRadius: '10rpx',
            }
          }, {
            type: 'image',
            url: `${userAvatar}`,
            css: {
              top: '1144rpx',
              left: '70rpx',
              borderRadius: '10rpx',
              width: '120rpx',
              height: '120rpx',
            }
          }, {
            type: 'text',
            text: `${userName}`,
            css: {
              top: "1144rpx",
              left: '230rpx',
              width: '230rpx',
              fontSize: '36rpx',
              color: '#000',
              fontWeight: 'bold',
              maxLines: '1'
            }
          }, {
            type: 'image',
            url: '/pages/visitors/images/poster_phone_blue.png',
            css: {
              top: '1206rpx',
              left: '230rpx',
              width: '18rpx',
              height: '22rpx',
            }
          }, {
            type: 'text',
            text: `${userMobile}`,
            css: {
              top: "1200rpx",
              left: '260rpx',
              fontSize: '30rpx',
              color: '#2c2c2c',
            }
          }, {
            type: 'text',
            text: `${userBrand}`,
            css: {
              top: "1244rpx",
              left: '230rpx',
              fontSize: '24rpx',
              color: '#5e5e5e',
            }
          },
          {
            type: 'image',
            url: `${qrCode}`,
            css: {
              top: '1134rpx',
              left: '548rpx',
              borderRadius: '140rpx',
              width: '140rpx',
              height: '140rpx',
            }
          },

        ],
      }
    }
  }
})